<template>
    <header>
        <h1 @click="isShow">ToDoList</h1>
        <transition name="fade">
            <p v-if="show">this is my todo list</p>
        </transition>
    </header>
</template>

<script>
    export default {
        name: "todoHeader",
        data() {
            return {show: true}
        },
        methods: {
            isShow: function() {
                this.show = !this.show;
            }
        }
    }
</script>

<style scoped lang="scss">
    h1 {
        padding: 10px 0;
        font-size: 32px;
        color: #fff;
        text-align: center;
    }
    p {
        padding: 10px 0;
        text-align: center;
        &.fade-enter {
            opacity: 0;
        }
        &.fade-enter-active,
        &.fade-leave-active {
            transition: opacity 1s;
        }
        &.fade-leave-to {
            opacity: 0;
        }
    }
</style>